<template>
  <div class="dialog">
    <el-dialog width="60%" :title="title" :visible="true" :close-on-click-modal="false" :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-form-item label="类目名称：" prop="categoryName">
          <el-col :span="12">
            <el-input v-model="form.categoryName" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="父级类目：">
          <el-col :span="12">
            <el-cascader
              v-model="form.parentId"
              :options="frontCategoryTree"
              :show-all-levels="false"
              :props="{label: 'categoryName', value: 'id', children: 'childList', emitPath:false, checkStrictly: true}"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item label="ICON：">
          <UploadFile :file-list="form.iconUrl" @change="uploadHandle($event, 'iconUrl')" />
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-col :span="12">
            <el-input v-model="form.sort" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="是否推荐到大首页：">
          <el-radio-group v-model="form.isBigHome">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否推荐到内部首页：">
          <el-radio-group v-model="form.isInnerHome">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="大首页排序：">
          <el-col :span="12">
            <el-input v-model="form.bigHomeSort" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="icon类型类名：">
          <el-col :span="12">
            <el-input v-model="form.iconClassName" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="跳转类型：">
          <el-col :span="12">
            <el-select v-model="form.redirectType" placeholder="请选择" clearable @change="changeRedirectType">
              <el-option
                v-for="item in jumpOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.redirectType === 1" label="appId：">
          <el-col :span="12">
            <el-input v-model="form.thirdPartyAppId" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="页面路径：">
          <el-col :span="12">
            <el-input v-model="form.redirectUrl" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.redirectType === 0 || form.redirectType ===4" label="后台映射类目：">
          <el-col :span="12">
            <el-cascader
              v-model="form.backgroundCategoryIdList"
              :options="categoryTree"
              :show-all-levels="false"
              :props="{label: 'name', value: 'id', children: 'categoryTreeVOS',emitPath:false,multiple: true,checkStrictly: true}"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.redirectType === 0 || form.redirectType === 1 || form.redirectType === 2" label="是否放首页：">
          <el-radio-group v-model="form.isHome">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isHome === 1" label="首页排序：" prop="homeSort">
          <el-col :span="12">
            <el-input v-model="form.homeSort" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.redirectType === 0" label="C端页面展示类型：">
          <el-col :span="12">
            <el-select v-model="form.showType" placeholder="请选择" clearable>
              <el-option label="展示店铺" :value="0" />
              <el-option label="展示产品" :value="1" />
              <el-option label="第三方页面" :value="2" />
              <el-option label="个性化开发页面" :value="3" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-col :span="12">
            <el-select v-model="form.status" placeholder="请选择" clearable>
              <el-option label="禁用" :value="0" />
              <el-option label="启用" :value="1" />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { CATEGORY_JUMP_TYPE } from '@/utils/enum'
import { getCategoryList, getFrontCategoryList, creatFrontCategoryList, updateFrontCategoryList } from '@/api/dictionary'
import UploadFile from '@/components/UploadFile/index.vue'
export default {
  name: 'AddFrontCategory',
  components: {
    UploadFile
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      loading: false,
      jumpOptions: CATEGORY_JUMP_TYPE,
      categoryTree: [],
      frontCategoryTree: [],
      form: {
        categoryName: '',
        parentId: '',
        iconUrl: '',
        sort: '',
        isBigHome: 0,
        isInnerHome: 0,
        bigHomeSort: '',
        iconClassName: '',
        redirectType: '',
        thirdPartyAppId: '',
        redirectUrl: '',
        backgroundCategoryIdList: [],
        isHome: 0,
        homeSort: '',
        showType: '',
        status: ''
      },
      rules: {
        categoryName: [{ required: true, message: '请输入类目名称', trigger: ['blur'] }],
        sort: [{ required: true, message: '请输入排序', trigger: ['blur'] }],
        status: [{ required: true, message: '请选择状态', trigger: ['change'] }],
        homeSort: [{ required: true, message: '请输入首页排序', trigger: ['blur'] }]
      }
    }
  },

  computed: {
    title() {
      if (this.type === 'edit') {
        return '编辑类目'
      } else {
        return '新增类目'
      }
    }
  },

  created() {
    if (this.type === 'edit') {
      this.form = this.formDetail
    }
    this.getFrontCategoryTree()
    this.getCategoryTree()
  },

  methods: {

    // 获取前台类目数
    getFrontCategoryTree() {
      getFrontCategoryList().then(res => {
        this.frontCategoryTree = res || []
      }).catch(() => {})
    },

    // 获取类目树
    getCategoryTree() {
      getCategoryList().then(res => {
        this.categoryTree = res || []
      }).catch(() => {})
    },

    // 更改跳转类型
    changeRedirectType() {
      this.form.isHome = 0
    },

    // 取消
    close() {
      this.$emit('close')
    },

    // 确定
    confirm() {
      if (this.type === 'edit') {
        this.editHandle()
      } else {
        this.addHandle()
      }
    },

    // 新增
    addHandle() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const { parentId } = this.form
          const data = {
            ...this.form,
            parentId: parentId || 0
          }
          console.log(data)
          creatFrontCategoryList(data).then(() => {
            this.$message.success('新增成功')
            this.loading = false
            this.$emit('confirm')
            this.close()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },

    // 编辑
    editHandle() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const { parentId } = this.form
          const data = {
            ...this.form,
            parentId: parentId || 0
          }
          updateFrontCategoryList(data).then(() => {
            this.$message.success('编辑成功')
            this.loading = false
            this.$emit('confirm')
            this.close()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },

    // 上传图片处理
    uploadHandle(payload, name) {
      this.form[name] = payload.fileList[0]?.url
      this.$refs.form.validateField(name)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select,.el-cascader{
  width: 100%;
}
</style>
